<template lang="pug">
.foot-menu.clearfix.animated.bounceInUp(
  v-if="getMenuStatus",
  ref="footWrap",
  :class="{'active': getMenuStyleObj}",
  @touchmove="handleDragPrevent")
  Scene
  //- 系统菜单
  .foot-menu-ulall
    ul.foot-menu-list.menu-system
      li.menu-item.omit(@click="showScene")
        span.menu-icon(:style="getBgColorStyle")
          i.iconfont.icon-scene(:style="getColorStyle")
        p.menu-text.omit(:style="getColorStyle") 场景
    ul.foot-menu-list.menu-system
      li.menu-item(@click="goHome", v-if="homeFlag")
        span.menu-icon(:style="getBgColorStyle")
          i.iconfont.icon-home(:style="getColorStyle")
        p.menu-text.omit(:style="getColorStyle") 主页

      li.menu-item.omit(
        v-for="(item, index) in menuDataList",
        :key="index",
        :content="item.isActive ? item.act_title : item.dis_title",
        @click="handleSytemMenuItem(item, index)")
        span.menu-icon(:style="getBgColorStyle")
          i.iconfont(v-if="item.isActive", :class="item.active_icon", :style="getColorStyle")
          i.iconfont(v-else, :class="item.icon", :style="getColorStyle")
        p.menu-text.omit(:style="getColorStyle") {{item.type_id === 'praise'? getPraiseCount : item.title}}

  //- 导航菜单
  .mask(v-if="isShowSubmenu", @touchstart="hideSubMenu")
  ul.bottom-menu-list.tac(v-if="getNavMenu && getNavMenu.length", v-scroll.x='', :style='getNavMenuCountStr ? "justify-content: center;": ""')
    //- , :style='(getNavMenu && getNavMenu.length < 6) ? "justify-content: center;": ""'
    //- , :style='getNavMenu.length < 6 ? `width: ${100 / getNavMenu.length}%;` : ""'
    li.bottom-menu-item.pos-r(v-for="(item, index) in getNavMenu", :key="index", @click="handleNavMenu(item, index)")
      p.new-text.pos-a(v-if="isLanjiukj && !item.is_menu_watch") new
      a(href="javascript:;", :class="{'has-icon': item.children && item.children.length > 0}", :style='getNavMenu.length < 6 ? "width: 100%;" : ""')
        .bottom-menu-text.omit
          van-icon(name="wap-nav", v-if="item.children && item.children.length > 0")
          span {{item.title}}

      ul.submenu(v-if="item.children && item.children.length && curIndex == index && isShowSubmenu")
        .submenu-content
          div(v-scroll.y='')
            li.item.pos-r(v-for="(child, index) in item.children", :key="index", @click.stop="handleSubMenu(child, index)")
              p.text.omit {{child.title}}
              p.date-text(v-if="isLanjiukj") {{child.created.substr(0, 10)}}
              p.new-text.pos-a(v-if="isLanjiukj && !child.is_menu_watch") new

  van-action-sheet(v-model="sheets", :actions="actions", @cancel="sheetCancel", cancel-text="取消")
</template>

<script>
// templatetype=3,5该模板特殊处理，右侧显示底部菜单，底部显示导航菜单

import wx from './menu-wx-mixins'
import { mapGetters } from 'vuex'

export default {
  mixins: [wx],
  computed: {
    ...mapGetters([
      'praiseCount'
    ]),
    getPraiseCount() {
      return this.praiseCount > this.countUnit
        ? Number(this.praiseCount/this.countUnit).toFixed(1) + 'w'
        : this.praiseCount
          ? this.praiseCount
          : 0
    },
  }
}
</script>

<style lang="stylus" scoped>
@import '../../../assets/styles/mixin.styl'
@import '../../../assets/styles/color.styl'

$theme-classic-color = #58B7FF
$theme-classic-color-active = #0e94ff
.theme-app-d
  .foot-menu
    position absolute !important
    width 100%
    overflow inherit !important
    .foot-menu-ulall
      display flex
      justify-content space-between
      .foot-menu-list
        flex-cnter()
        padding: 10px 0
        box-sizing: border-box
        color: $white
        .menu-item
          flex: 1
          max-width: 46px
          align-self: center
          display: inline-block
          text-align: center
          cursor: pointer
          .menu-text
            font-size: 10px
            margin-top: 5px
          .menu-icon
            display: inline-block
            width: 28px
            height: 28px
            line-height: 28px
            border-radius: 50%
            transition: all 1s
            background-color: $white
            i
              vertical-align: middle
              color: $theme-classic-color
      .foot-menu-list:nth-child(1)
        width 20%
        justify-content flex-start
      .foot-menu-list:nth-child(2)
        width 80%
        justify-content flex-end
    .mask
      position: fixed
      bottom: 0
      left: 0
      width: 100vw
      height: 100vh
      z-index 12
    .bottom-menu-list
      position: relative
      z-index: 13
      display flex
      background-color: $white

      .bottom-menu-item
        background-color: $white
        line-height: 36px
        color: $black
        &:not(:last-child)
          bdr-1px($gray)
        &:nth-of-type(1)
          .submenu
            transform: translate(2px, -100%)
        &:last-child
          .submenu
            transform: translate(-2px, -100%)
        & > a
          display: block
          padding: 5px 10px
          // width: 20vw
          box-sizing: border-box
          margin: 0 auto
          &.has-icon
            padding-left: 15px
        .new-text
          right 5px
          top -10px
          z-index 2
          height 0
          color #f00
          font-size 11px
        .van-icon
          vertical-align sub
          font-size 16px
          // position: absolute
          // top: 50%
          // left: 4px
          // transform: translateY(-50%)
        .bottom-menu-text
          font-size: 12px
          color: $black-light

        .submenu
          position: absolute
          top: -10px
          width: 100%
          border-radius: 4px
          background-color: $white
          transform: translateY(-100%)
          trangle-bottom(10px, $white)
          .submenu-content
            width: 100%
            max-height: 200px
            overflow-y: auto
            overflow-x hidden
            position: relative
            li
              // height = 35px
              // height: height
              // line-height: height
              overflow: hidden
              &:not(:last-child)
                bdb-1px($gray)
              a
                font-size: 12px
                color: $black-light
                // height: height
              .date-text
                height 12px
                line-height 12px
                width 100%
                font-size 10px
                color #999

</style>
